<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<meta name="x5-orientation" content="portrait" />
	<meta name="x5-fullscreen" content="true" />
	<meta name="screen-orientation" content="portrait" />
	<meta name="full-screen" content="yes" />
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/layer_mobile.css"/>
	<link rel="stylesheet" type="text/css" href="css/login.css"/>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/layer_mobile.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<title>注册</title>
</head>
<body>
	<!-- header -->
	<header>
		<a class="left" href="login.html"></a>
		<p class="left">注册</p>
	</header>
	<!-- from_input -->
	<from name="from" action="" method="post">
		<span class="input_f1">
			<input type="text" class="mobile" placeholder="手机号码" />
			<em id="mobile_prompt"></em>
		</span>
		<span class="input_f1 input_f2 clearfix">
			<input type="text" class="auth_code" placeholder="验证码"  />
			<button class="count">短信验证码</button>
		</span>
		<span class="input_f1 input_f5">
			<input type="password" class="pwd"  placeholder="密码"  />
		</span>
		<span class="input_f1 input_f4">
			<input type="password" class="Invitation_code" value="" placeholder="邀请码"  />
		</span>		
		<span>
			<input class="login" type="button" value="注册并登录" disabled></input>
		</span>
		<p>注册并登陆即同意<a href="registration.html">《注册协议》</a></p>
	</from>
</body>
</html>
<script type="text/javascript">
	$('input').bind('input propertychange', function(){
		 if($('.mobile').val()=="" || $('.pwd').val()=="" || $('.auth_code').val()=="") //如果两个值中只要有一个为空则
		{
		 	$('.login').attr('disabled',true)
		 	$('.login').css('background','#ffdada')	
		}
		else{
			$('.login').removeAttr('disabled')
			$('.login').css('background','#f18e8e')	
		}	      	      
	});
	var iphonetest=/^1(3|4|5|7|8)\d{9}$/;//表示以1开头，第二位可能是3/4/5/7/8等的任意一个,表示数字[0-9]的9位,11位结束。
    var pwdtest=/^[\x21-\x7E]{6,20}$/;//匹配 以字母开头，长度在6~20之间，只能包含字符、数字和下划线	
    var pwdtes =/^([\u4e00-\u9fa5]+|[\u4e00-\u9fa5]+[a-zA-Z0-9]+|[a-zA-Z0-9]+)$/
	//账号密码登录
	$(".login").on('click',function(){
		var mobile= $(".mobile").val();//账号
		var pwda= $(".pwd").val();//密码
		var auth_code = $('.auth_code').val();
		var Invitation_code = $('.Invitation_code').val();
		//正则验证
		if(!(iphonetest.test(mobile))){
			alerts("账号输入有误！");
			return false;
		}else if(auth_code == ''){
			alerts("验证码不能为空")
		}else if(!(pwdtes.test(pwda))){
			alerts("只能是数字与字母")
		}
		else if(!(pwdtest.test(pwda))){
			alerts('请输入6-20位、数字与字母')
		}
		else{
			//ajax提交	
			//data传值
			var json = {
				phone:$(".mobile").val(),
				code: $('.auth_code').val(),
				userPassword:$(".pwd").val(),
				inviteCode:$('.Invitation_code').val()
			}
			$.ajax({
				type:"post",
				url:site+"/login/register",
				datatype:'json',
				data:json,
				success:function(data,status) {
					console.log(data.msg)
			       	if (data.code == 0){
			       		alerts(data.msg);
			       	}
			     	else{		     
          				window.location.href = "./login.html";//返回成功之后跳转首页
			     	} 		
				}
			});
		}
	});
	var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    var processing = false;//开关
    $('.count').click(function() {
        //向后台发送处理数据
        $.ajax({
            type: "get", //用post方式传输
        	url: site+'/login/massage',
            dataType: "json", //数据格式:JSON
            data:{
            	phone:$('.mobile').val(),
            	mtype:"0",
            },
            success: function (data) {    
            	console.log(data.msg)
                if(data.code == 1){
                	alerts(data.msg)
                    curCount = count;
//                  $('.auth_code').val(data.data),
                    //设置button效果，开始计时
                    $(".count").attr("disabled", "true");
                    processing = false;
                    $(".count").text(+ curCount + "秒内输入");
                    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                }else {
                    alerts(data.msg);
                }
            }
        });
    })
    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器    
            $(".count").removeAttr("disabled");//启用按钮
            $(".count").text("重新发送验证码");        
        }
        else {
            curCount--;
            processing = true
            $(".count").text(+ curCount + "秒内输入");  
        }
    }
</script>
